<template>
    <el-row :gutter="4">
        <el-col :span="16">
            <div class="form-item">
                <label>线条</label>
                <xue-input
                    :defaultValue="get('data.strokeWidth', 1)"
                    size="mini"
                    @change="(value) => update({
                        changes: [{
                            path: 'data.strokeWidth',
                            value: parseInt(value),
                        }]
                    })"
                >
                    <slot name="suffix">px</slot>
                </xue-input>
                <xue-color
                    :defaultValue="get('data.stroke', '')"
                    @change="(value) => update({
                        changes: [{
                            path: 'data.stroke',
                            value,
                        }]
                    })"
                />
            </div>
        </el-col>
        <el-col :span="8">
            <div class="form-item">
                <label>填充</label>
                <xue-color
                    :defaultValue="get('data.fill', '')"
                    @change="(value) => update({
                        changes: [{
                            path: 'data.fill',
                            value,
                        }]
                    })"
                />
            </div>
        </el-col>
    </el-row>
</template>

<script>
import XueInput from '@/components/xueInput.vue';
import xueColor from '@/components/xueColor.vue';
import XueSlider from '@/components/XueSlider.vue';

export default {
    props: ['get'],
    inject: ['update'],
    mounted() {
    
    },
    components: {
        XueInput,
        xueColor,
        XueSlider,
    }
}
</script>

<style lang="less" scoped>
.form-item {
    display: flex;
    align-items: center;
    label {
        flex: 0 0 28px;
    }
}
</style>